<template>
	<n-page>
		<view slot="navbar">
			<scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" style="background-color: #fff4ed;>" :scroll="false" :scroll-x="true" :show-scrollbar="false"
			 :scroll-into-view="'a' + status">
				<view class="flex-column">
					<view class="flex-row">
						<view class="uni-tab-item" v-for="(item,index) in statusList" :key="index" :id="'a' + item.class_id" @click="categoryChange(item.class_id)">
							<text class="uni-tab-item-title" :class="status==item.class_id ? 'color-red-6' : ''">{{item.class_name}}</text>
							<view style="height: 6rpx;" :class="status==item.class_id ? 'bg-red-6' : ''"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view slot="header">
			
		</view>
		<view slot="body" style="height: 100%;">
			<z-paging ref="paging" @query="getData" :list.sync="dataList">
				<view class="bg-gray-1 padding-x-md margin-top-md">
					<view  class="flex-column padding-y-md border-bottom-xs border-gray-3 border-solid" style="border: 0;" v-for="(checklistItem, index) in dataList" :key="index" @click="toArticle(checklistItem.id)" v-if="checklistItem.picture_layout =='center' " >
						<view class="flex-1">
							<text class="text-md lines-2">{{checklistItem.title}} </text>
						</view>
						<n-image width="700" :src="checklistItem.article_img" :placeholder="$util.getDefaultImage().default_shop_img" mode="aspectFill"></n-image>
						<view class="flex-row justify-between items-center">
							<view class="color-gray-6">
								<text>99+ 阅读</text>
								<text class="left-text-time">{{ $util.timeStampTurnTime(checklistItem.create_time) }}</text>
							</view>
							<n-icon name="close" color="$gray-6" size="30"></n-icon>
						</view>
					</view>
					<!-- left -->
					<view class="flex-column padding-y-md border-bottom-xs border-gray-3 border-solid" style="border: 0;"  v-for="(checklistItem, index) in dataList" :key="index" @click="toArticle(checklistItem.id)" v-if="checklistItem.picture_layout =='left' ">
						<view class="flex-row">
							<n-image width="230" height="150" :src="checklistItem.article_img" :placeholder="$util.getDefaultImage().default_shop_img" mode="aspectFill"></n-image>
							<view class="flex-1">
								<text class="text-md lines-2">{{checklistItem.title}} </text>
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="color-gray-6">
								<text>99+ 阅读</text>
								<text class="left-text-time">{{ $util.timeStampTurnTime(checklistItem.create_time) }}</text>
							</view>
							<n-icon name="close" color="$gray-6" size="30"></n-icon>
						</view>
					</view>
				
					<view class="flex-column padding-y-md border-bottom-xs border-gray-3 border-solid" style="border: 0;"  v-for="(checklistItem, index) in dataList" :key="index" @click="toArticle(checklistItem.id)" v-if="checklistItem.picture_layout =='right' ">
						<view class="flex-row">
							<view class="flex-1">
								<text class="text-md lines-2">{{checklistItem.title}} </text>
							</view>
							<n-image width="230" height="150" :src="checklistItem.article_img" :placeholder="$util.getDefaultImage().default_shop_img" mode="aspectFill"></n-image>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="color-gray-6">
								<text>99+ 阅读</text>
								<text class="left-text-time">{{ $util.timeStampTurnTime(checklistItem.create_time) }}</text>
							</view>
							<n-icon name="close" color="$gray-6" size="30"></n-icon>
						</view>
					</view>
				</view>
			</z-paging>
		
		</view>
		<view slot="footer">
			<diy-bottom-nav></diy-bottom-nav>
		</view>
	</n-page>
</template>

<script>
	
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	
	export default {
		components: {
			uniIcons,
			diyBottomNav
		},
		data() {
			return {
				dataList: [],
				status: 0,
				statusList: [ ],
				reason: '', //理由
				id: 0, //member_id
				option: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			
			this.init()
			
		},
		methods: {
			// 初始化
			init() {
				this.classLists()
			},
			// 文章分类
			classLists() {
				this.$api.sendRequest({
					url: '/api/articleclass/lists',
					data: {},
					success: res => {
						if (res.code == 0) {
							// console.log(res);
							this.statusList = res.data
							this.status = res.data[0].class_id
							this.$refs.paging.reload()
						}
					},
				});
			},

			//切换分类
			categoryChange(e) {
				this.status = e;
				this.$refs.paging.reload()
			},

			getData(pageNo, pageSize) {
				this.$api.sendRequest({
					url: '/api/article/page',
					data: {
						page_size: pageSize,
						page: pageNo,
						class_id: this.status,
					},
					success: res => {
						let newArr = [];
						if (res.code == 0) {
							newArr = res.data.list;
						}
						console.log(newArr);
						this.$refs.paging.complete(newArr);
					},
					fail: res => {
						this.$refs.paging.complete(false);
					}

				});
			},

			// 详情
			toArticle(id) {
				console.log(id);
				uni.navigateTo({
					url: '/otherpages/member/learn/info/info?id=' + id,
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	

</style>
